<template>
  <p>计数器：{{ count }}</p>
  <button @click="count++">+1</button>
  <p>年龄：{{ obj.age }}</p>
  <button @click="obj.age++">+1</button>
  <p>年龄：{{ obj1.age }}</p>
  <button @click="obj1.age++">+1</button>
  <p>年龄：{{ obj2.childr.age }}</p>
  <button @click=" obj2.childr.age++">+1</button>
</template>

<script setup>
import { ref, reactive, computed, watch, nextTick } from "vue";
const count = ref(0);
// 1. 监听一个响应式数据
// watch(数据, 改变后回调函数)
watch(count, () => {
  console.log("count改变了");
});
const obj = reactive({
  name: "zp",
  age: 18,
});
watch(obj, () => {
  console.log("obj变化了");
});
const obj1 = reactive({
  name: "zp",
  age: 10,
});
watch(()=>obj1.age,()=>{
  console.log('obj1里面的age变了')
})
const obj2 = reactive({
  name: "zp",
  age: 10,
  childr:{
    age:123
  }
});
// 要开启深度监听
watch(()=>obj2.childr,()=>{
  console.log('obj2里面的childr变了')
},{
  deep:true
})


</script>
